<template>
	<div class="base-info-content">
		<el-form ref="ruleFormRef" :model="storeSeckillGoods" label-width="180px">
            <el-form-item label="商品主图：" prop="imgUrl">
				<section>
					<el-image v-if="storeSeckillGoods.seckillImage != ''" class="mr20"
						style="width:64px; height: 64px;border-radius: 5px;" :src="storeSeckillGoods.seckillImage" fit="cover" />
					<section v-else class="selector-img" @click="addImg('imgUrl', 0)">
						<el-icon size="30" color="#999">
							<Plus />
						</el-icon>
					</section>
				</section>
			</el-form-item>
            <el-form-item label="商品轮播图：">
				<section>
					<section class="flex">
						<el-image v-for="(item, index) in storeSeckillGoods.seckillImages" :key="index" class="mr20"
							style="width:64px; height: 64px;border-radius: 5px;" :src="item" fit="cover" />
						<section class="selector-img" @click="addImg('imgOnlineArr', 1)">
							<el-icon size="30" color="#999">
								<Plus />
							</el-icon>
						</section>
					</section>
				</section>
			</el-form-item>
            <el-form-item label="商品标题：" prop="title">
				<el-input class="width420" v-model="storeSeckillGoods.seckillTitle" placeholder="请输入商品标题" />
			</el-form-item>
            <el-form-item label="活动秒杀简介：" prop="title">
				<el-input class="width420"
					v-model="storeSeckillGoods.seckillInfo"
                    maxlength="30"
                    style="width: 240px"
                    placeholder="请输入商品标题秒杀简介"
                    show-word-limit
                    type="textarea"/>
			</el-form-item>

            <el-form-item label="运费模板：">
				<section style="display: flex;flex-direction: column;">
					<section class="flex">
						<el-select placeholder="请选择运费模板" class="width420" v-model="storeSeckillGoods.seckillTempId">
							<el-option v-for="item in state.modelList"  :label="item.name" :value="item.id" />
						</el-select>
					</section>
				</section>
			</el-form-item>
            <el-form-item label="当天参与活动次数：" prop="title">
				<el-input-number v-model="storeSeckillGoods.seckillNum" :min="1" :step="1" class="width420"/>
			</el-form-item>
            <el-form-item label="活动日期："  prop="title">
				<section class="width420">
					<el-date-picker
						v-model="storeSeckillGoods.seckillTime"
						type="daterange"
						range-separator="-"
						format="YYYY-MM-DD" value-format="YYYY-MM-DD"
						start-placeholder="开始日期" end-placeholder="结束日期"
					/>
                </section>
			</el-form-item>
            <el-form-item label="活动时间：" prop="title">
				<section class="flex">
					<el-select placeholder="请选择活动时间" class="width420" v-model="storeSeckillGoods.seckillTimeId">
						<el-option v-for="item in state.timesIdArr" :label="item.seckillManagerName +'&nbsp;|&nbsp;' + item.seckillManagerTime.replace(',','-')" :value="item.seckillManagerId" />
					</el-select>&emsp;
				</section>
			</el-form-item>
            <el-form-item label="活动状态：" prop="title" style="margin-top: -7px;">
				<el-switch v-model="storeSeckillGoods.seckillStatus" :active-value="1" :inactive-value="0"/>
			</el-form-item>
            <el-form-item label="商品属性：" prop="title" style="margin-top: -7px;">
				<el-table ref="multipleTableRef" :data="storeSeckillGoods.productInfos" border
					:header-cell-style="{ textAlign: 'center'}" @selection-change="handleSelectionChange" :cell-style="{ textAlign: 'center' }" class="tableOnlypaddingLeft">
					<el-table-column type="selection" width="55" />
					<el-table-column prop="skuId" label="ID" width="90"></el-table-column>
					<el-table-column label="图片" width="90">
						<template #default="scope">
							<section style="width:32px; height: 32px;display: inline-block;" @click="addImg('skuImgUrl', 0)">
								<el-image v-if="scope.row.skuImgUrl != '' && scope.row.skuImgUrl != null"
									style="width:32px; height: 32px;border-radius: 5px;" :src="scope.row.skuImgUrl" fit="cover" />
								<section v-else class="selector-img" style="width:32px; height: 32px;border-radius: 5px;">
									<el-icon size="32" color="#999" style="width:32px; height: 32px;border-radius: 5px;" >
										<Plus />
									</el-icon>
								</section>
							</section>
						</template>
					</el-table-column>
					<el-table-column label="属性" show-overflow-tooltip>
						<template v-slot="scope">
							<span>{{ scope.row.skuTypeName }}</span>
						</template>
					</el-table-column>
					<el-table-column prop="skuSerialName" label="规格"></el-table-column>
					<el-table-column label="秒杀价" min-width="120">
						<template v-slot:header>
							秒杀价
							<el-popover placement="top-start" trigger="hover"
								content="商品秒杀价格">
								<template #reference>
									<el-icon><QuestionFilled /></el-icon>
								</template>
							</el-popover>
						</template>
						<template v-slot="scope">
							<el-form-item :prop="`productInfos.${scope.$index}.price`" class="autoWidth">
								<el-input-number v-model="scope.row.price" :step="1" :min="0" :max="scope.row.retailPrice"  placeholder="请输入">
									<!-- <template #append>
										<span>元</span>
									</template> -->
								</el-input-number>
							</el-form-item>
						</template>
					</el-table-column>
					<el-table-column label="零售价">
						<template v-slot:header>
							零售价
							<el-popover placement="top-start" trigger="hover"
								content="商品销售价格">
								<template #reference>
									<el-icon><QuestionFilled /></el-icon>
								</template>
							</el-popover>
						</template>
						<template v-slot="scope">
							<el-form-item>
								<span>{{scope.row.retailPrice}}元</span>
							</el-form-item>
						</template>
					</el-table-column>
					<!-- <el-table-column label="划线价">
						<template v-slot:header>
							划线价
							<el-popover placement="top-start" trigger="hover"
								content="线上展示使用，建议填写商品指导价">
								<template #reference>
									<el-icon><QuestionFilled /></el-icon>
								</template>
							</el-popover>
						</template>
						<template v-slot="scope">
							<el-form-item>
								<span>{{scope.row.referencePrice}}元</span>
							</el-form-item>
						</template>
					</el-table-column> -->
					<el-table-column label="最低价">
						<template v-slot:header>
							最低价
							<el-popover placement="top-start" trigger="hover"
								content="商品控价价格，低于该价格商品禁止销售">
								<template #reference>
									<el-icon><QuestionFilled /></el-icon>
								</template>
							</el-popover>
						</template>
						<template v-slot="scope">
							<el-form-item>
								<span>{{scope.row.lowPrice}}元</span>
							</el-form-item>
						</template>
					</el-table-column>
					<el-table-column label="成本价">
						<template v-slot:header>
							成本价
							<el-popover placement="top-start" trigger="hover"
								content="商品成本价格，用来核算商品利润，不填写则无法核算利润">
								<template #reference>
									<el-icon><QuestionFilled /></el-icon>
								</template>
							</el-popover>
						</template>
						<template v-slot="scope">
							<el-form-item>
								<span>{{scope.row.costPrice}}元</span>
							</el-form-item>
						</template>
					</el-table-column>
					<el-table-column label="库存">
						<template v-slot:header>
							库存
							<el-popover placement="top-start" trigger="hover"
								content="系统支持0库存门店销售。但商品库存为0时，线上将无法销售">
								<template #reference>
									<el-icon><QuestionFilled /></el-icon>
								</template>
							</el-popover>
						</template>
						<template v-slot="scope">
							<el-form-item>
								<span>{{scope.row.stock}}</span>
							</el-form-item>
						</template>
					</el-table-column>
					<el-table-column label="限量" min-width="120">
						<template v-slot:header>
							限量
							<el-popover placement="top-start" trigger="hover"
								content="商品秒杀限定数量">
								<template #reference>
									<el-icon><QuestionFilled /></el-icon>
								</template>
							</el-popover>
						</template>
						<template v-slot="scope">
							<el-form-item :prop="`productInfos.${scope.$index}.quota`" class="autoWidth">
								<el-input-number v-model="scope.row.quota" placeholder="请输入" :step="1" :min="1" :max="scope.row.stock ? scope.row.stock : 100"></el-input-number>
							</el-form-item>
						</template>
					</el-table-column>
				</el-table>
			</el-form-item>
		</el-form>
		<AddInformation @selectFun="selectFun" ref="addInformationRef" />
	</div>
</template>
<script setup lang="ts" name="funWangEditor">
import { reactive, onMounted, ref,defineAsyncComponent} from 'vue';
import { Plus,QuestionFilled } from '@element-plus/icons-vue'
import type { FormInstance, FormRules } from 'element-plus'
import { getModelIdList, seckillList } from '/@/api/marketing';
import { useAddSeckillGoods } from '@/stores/addSeckillGoods'
const AddInformation = defineAsyncComponent(() => import('/@/components/information/AddInformation.vue'))
const addInformationRef = ref()
const ruleFormRef = ref<FormInstance>()
const multipleTableRef = ref();
const state = reactive({
	// 添加图片类型
	addFileType: '',
	// 运费模板
	modelList: [] as Array<any>,
	// 活动时间
	timesIdArr: [] as Array<any>,
})
const props = defineProps({
	goodsData: {
		type: Object,
		default: () => {},
	},
});
const storeSeckillGoods = useAddSeckillGoods();
// let addGoodsItme = reactive(Object.assign({},props.goodsData));

const toggleSelection = (rows:any) => {
  if (rows) {
    rows.forEach((row:any) => {
      multipleTableRef.value!.toggleRowSelection(row, undefined)
    })
  } else {
    multipleTableRef.value!.clearSelection()
  }
}
//选中商品属性
const handleSelectionChange = (val:any) => {
	if(val.length > 0){
		storeSeckillGoods.productInfos.forEach((items:any) => {
			val.forEach((item:any) => {
				if(items.skuId == item.skuId){
					items.isSelected = 1;
				} else {
					items.isSelected = 0;
				}
			})
		})
	} else {
		storeSeckillGoods.productInfos.forEach((items:any) => {
			items.isSelected = 0;
		})
	}
	
	console.log(storeSeckillGoods.productInfos)
	// // let arr = [];
	// if(val.length > 0){
	// 	arr = val.slice();
	// } else {
	// 	arr = [];
	// }
	// addGoodsItme.productInfos = arr.slice();
}

//获取模型
const getModelList = () => {
	getModelIdList().then(res => {
		if(res.code == 400){
			state.modelList = res.results.records.slice();
		}
	})
}
//获取时间id
const getTimeIds = () => {
	seckillList({}).then(res => {
		state.timesIdArr = res.results.records.slice();
	})
}

// 图片选中
const addImg = (type: string, isArr: Number) => {
	state.addFileType = type;
	addInformationRef.value.openDialog(isArr)
}

// 图片选中回调
const selectFun = (fileList: any) => {
	if (state.addFileType == 'imgUrl') {
		// props.goodsData.imgUrl = fileList[0]
		storeSeckillGoods.seckillImage = fileList[0]
	} else if (state.addFileType == 'imgOblongUrl') {
		// props.goodsData.imgOblongUrl = fileList[0]
		storeSeckillGoods.imgOblongUrl = fileList[0]
	} else if (state.addFileType == 'imgOnlineArr') {
		// props.goodsData.imgOnlineArr = fileList
		storeSeckillGoods.seckillImages = fileList.slice();
	}
}

// 页面加载时
onMounted(() => {
	getModelList();
	getTimeIds();
});


</script>

<style lang="scss" scoped>
.base-info-content {
	.form-ele-size {
		width: 260px;
	}

	.line-title {
		font-size: 18px;
		padding: 8px 12px;
		background-color: #eceef0;
		border-radius: 6px;
		margin-bottom: 15px;
	}

	.selector-img {
		width: 64px;
		height: 64px;
		border: 1px solid #ededed;
		border-radius: 5px;
		cursor: pointer;
		display: flex;
		justify-content: center;
		align-items: center;

		&:hover {
			background-color: #f5f5f5;
			border: 1px solid #e4e3e3;
		}
	}
	.specItemBox{
		position: relative;
		width: min-content
	}
	.specItemBox .close-tag{
		position: absolute;
		cursor: pointer;
		top:-6px; 
		right:-6px;
		display: none;
	}

	.specItemBox:hover .close-tag {
		display: inline; /* 鼠标悬浮时显示关闭标签 */
	}

	.batchSettingsBox {
      display: flex;
      justify-content: flex-start;
      .input-wrapper {
        position: relative;
        width: 100px;
        height: 35px;
        line-height: 35px;
        margin-right: 10px;
        box-sizing: border-box;
		label{
			height:18px;
			color: var(--el-color-primary);
			background:var(--el-color-white)
		}
      }

      input {
        border: none;
        background: none;
        width: 100px;
        height: 35px;
        font-size: 18px;
        border-radius: 4px;
        border: 1px solid var(--el-color-primary) !important;
        outline: none;
      }
      label {
        position: absolute;
        top: 2px;
        left: 20px;
        font-size: 16px;
        color: #FFF;
        pointer-events: none;
        transition: 0.2s ease all;
      }

      input:focus+label,
      input:not(:placeholder-shown)+label {
        top: -10px;
        left: 8px;
        font-size: 14px;
        border-color: #007acc;
        color: #2D8CF0 !important;
		height:18px;
		line-height:18px;
      }
    }
}
.width420{
	:deep(.el-date-editor){
		width: 420px !important;
		height: 34px !important;
	}
	:deep(.el-input-number){
		width: 420px !important;
	}
}
// .tableOnlypaddingLeft{
// 	:deep(.el-input--default .el-input__wrapper){
// 		padding: 0 0 0 10px;
// 	}
// }
.autoWidth{
	width: 100%;
	:deep(.el-form-item__content){
		width: 100%;
	}
}

// :deep(.autoWidth .el-form-item__content){
// 	width: 100% !important;
// }
:deep(.autoWidth .el-input-number){
	width: 100%;
}
</style>
